<template>
  <div>
      <el-form ref="tableOutput" :model="tableOutput" label-width="180px">
        <el-scrollbar style="height: 550px;">
          <div style="padding-right: 20px;">
          <el-form-item label="步骤名称" prop="name">
            <el-input v-model="tableOutput.name"></el-input>
          </el-form-item>
          <el-form-item label="数据源:" prop="connection">
            <el-popover
              ref="datasourceListPopover"
              placement="bottom-start"
              trigger="click"
              v-model="srcPopover">
              <table-tree  ref="tableTree"
                           @tableSelectHandler="tableSelectHandler"
                           @srcSelectHandler="srcSelectHandler"
                           style="height: 400px; overflow-y: auto"></table-tree>
            </el-popover>
            <el-input v-model="tableOutput.connection.name"  v-popover:datasourceListPopover :readonly="true" placeholder="点击选择数据表"></el-input>
          </el-form-item>
            <!-- :readonly="true" -->
          <el-form-item label="目标模式" prop="schema">
            <el-input v-model="tableOutput.schema" class="u-el-input" style="width:100%" ></el-input>
            <!-- <el-button type="primary" @click="getSchemas" style="float:right" :disabled="connectionVisible">浏览</el-button> -->
          </el-form-item>
          <el-form-item label="目标表" prop="table">
            <el-input v-model="tableOutput.table.name" class="u-el-input" style="width:100%" :disabled="table"></el-input>
            <!-- <el-button type="primary" @click="getTables" style="float:right" :disabled="connectionVisible">浏览</el-button> -->
          </el-form-item>
          <el-form-item label="提交记录数量" prop="commit">
            <el-input-number v-model="tableOutput.commit" controls-position="right" :min="1"></el-input-number>
          </el-form-item>
            <el-row>
              <el-col :span="6">
                <el-form-item label="执行前清空表（剪裁表）" prop="truncate">
                  <el-checkbox v-model="tableOutput.truncate" :disabled="truncate" true-label="Y" false-label= "N" title="插入目标表前会先删除目标表的内容"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="忽略插入错误" prop="ignore_errors">
                  <el-checkbox v-model="tableOutput.ignore_errors" :disabled="ignore_errors" true-label="Y" false-label= "N"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="指定数据库字段" prop="specify_fields">
                  <el-checkbox v-model="tableOutput.specify_fields" true-label="Y" false-label= "N" @change="specify_fields_chanage"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="使用批量插入" prop="use_batch">
                  <el-checkbox v-model="tableOutput.use_batch" true-label="Y" false-label= "N" @change="use_batch_change" :disabled="use_batch"></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
          <el-tabs v-model="tabsValue" type="border-card" class="tabs">
            <el-tab-pane label="数据库字段" name="dbField" id="tabs">
              <el-row>
                  <el-table ref="table"  :data="tableOutput.fields" size="mini"  border style="width: 100%;" height="300">
                    <el-table-column label="" width="50" :resizable=false type="index">
                    </el-table-column>
                    <el-table-column label="操作" width="80" :resizable=false>
                      <template slot-scope="scope">
                        <div class="optionStyle">
                          <el-button
                            type="text"
                            @click="removeObj(scope.$index)"
                            size="mini">移除
                          </el-button>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column property="stream_name" label="流（输入）字段">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.stream_name" size="mini" style="width: 100%;" @focus="getStreamFiledOption">
                          <el-option
                            v-for="item in streamFields"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column property="column_name" label="输出字段" >
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.column_name" size="mini" style="width: 100%;" @focus="getInputFieldsOption" filterable clearable>
                          <el-option
                            v-for="item in tableFields"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                  </el-table>
              </el-row>
              <el-row type="flex">
                <el-button class="el-table-add-row"  @click="addObj" icon="el-icon-plus"> 添加</el-button>
                <div style="width: 20px"></div>
                <el-button  class="el-table-add-row" @click="getFields" icon="el-icon-thumb">获取字段</el-button>
                <div style="width: 20px"></div>
                <el-button  class="el-table-add-row" @click="fieldMatch">匹配字段</el-button>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="高级选项" name="main" >
              <!--
              <el-form-item label="表分区数据" prop="partitioning_enabled">
                <el-checkbox v-model="tableOutput.partitioning_enabled" true-label="Y" false-label= "N" @change="partitioning_enabled_change"></el-checkbox>
              </el-form-item>
              <el-form-item label="分区字段" prop="partitioning_field">
                <el-input v-model="tableOutput.partitioning_field" :disabled="partitioning_field"></el-input>
              </el-form-item>
              <template>
                <el-form-item prop="partitioning_monthly">
                  <el-radio v-model="tableOutput.partitioning_monthly" @change="partition_change('monthly')" label="Y" :disabled="partitioning_monthly">每个月分区数据</el-radio>
                </el-form-item>
                <el-form-item prop="partitioning_daily">
                  <el-radio v-model="tableOutput.partitioning_daily" @change="partition_change('daily')" label="Y" :disabled="partitioning_daily">每天分区数据</el-radio>
                </el-form-item>
              </template>
              -->
              <el-form-item label="表名定义在一个字段里" prop="tablename_in_field" v-if="false">
                <el-checkbox v-model="tableOutput.tablename_in_field" true-label="Y" false-label= "N" @change="tablename_in_field_chanage"></el-checkbox>
              </el-form-item>
              <el-form-item label="包含表名的字段" prop="tablename_field" v-if="false">
                <el-input v-model="tableOutput.tablename_field" :disabled="tablename_field"></el-input>
              </el-form-item>
              <el-form-item label="存储表名字段" prop="tablename_in_table" v-if="false">
                <el-checkbox v-model="tableOutput.tablename_in_table" true-label="Y" false-label= "N" :disabled="tablename_in_table" ></el-checkbox>
              </el-form-item>
              <el-form-item label="返回一个自动产生的关键字" prop="return_keys">
                <el-checkbox v-model="tableOutput.return_keys" true-label="Y" false-label= "N" @change="return_keys_change"></el-checkbox>
              </el-form-item>
              <el-form-item label="自动产生的关键字的字段名" prop="return_keys_name">
                <el-input v-model="tableOutput.return_keys_name" :disabled="return_keys_name"></el-input>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
          </div>
        </el-scrollbar>
        <div class="el-dialog__footer">
          <span class="dialog-footer">
            <el-button type="success" icon="el-icon-view" @click="preview">预览</el-button>
            <el-button type="warning" @click="createTableClick">创建表</el-button>
            <!-- <el-button type="primary" @click="getSQL">SQL</el-button> -->
            <el-button
              icon="el-icon-back"
              @click="cancel">取消
            </el-button>
            <el-button
            type="primary" icon="el-icon-check"
            @click="handleSaveData()">确定
           </el-button>
          </span>
        </div>
      </el-form>
      <!-- 输入映射的弹出框 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="790px"
        :append-to-body="true"
        class="u-el-dialog">
        <u-tran ref="mapper" @setFields="setFields" @hiddenDialog="hiddenDialog"></u-tran>
      </el-dialog>
      <!-- 模式弹出框 -->
      <el-dialog
        :visible.sync="schemaDialogVisible"
        :close-on-click-modal="false"
        :title="schemaDialog"
        :append-to-body="true">
        <schema-dialog ref="schemaDialog" @setSchema="setSchema" @closeDialog="closeDialog"></schema-dialog>
      </el-dialog>
      <!-- 表弹出框 -->
      <el-dialog
        :visible.sync="sqlEditorVisible"
        :close-on-click-modal="false"
        :title="sqlEditorTitle"
        width="40%"
        :append-to-body="true">
        <span>以";"分割的SQL语句</span>
        <el-input type="textarea" v-model="sqlValue"></el-input>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sqlEditorVisible = false">确定</el-button>
        <el-button @click="sqlEditorVisible = false">取消</el-button>
      </span>
      </el-dialog>
      <el-dialog
        :visible.sync="tableDialogVisible"
        :close-on-click-modal="false"
        :title="tableDialog"
        width="40%"
        :append-to-body="true">
        <table-dialog ref="tableDialog" @setTable="setTable" @closeDialog="closeDialog"></table-dialog>
      </el-dialog>
    <el-drawer title="信息详情" direction="rtl" :visible.sync="tableInfoVisible" size="calc(100% - 230px);">
      <table-info style="padding: 0 10px;" ref="tableInfo" :mheight="domHeight - 100"></table-info>
    </el-drawer>
  </div>
</template>

<script>
import mxgraph from '../../../../../graph/VueMxGraphLoader'
import API from '../../../../../api/index'
import ConformStanView from '../../../mapping-dialog/mapping-dialog.vue'
import SchemaDialog from '../../../schema/schema-dialog.vue'
import TableDialog from '../../../table/table-dialog.vue'
import TableTree from '../../../table/table-tree.vue'
import TableInfo from '../../../table/table-info-simple.vue'

/* eslint-disable no-undef */
/* eslint-disable no-new-object */
/* eslint-disable no-new */
/* eslint-disable new-cap */
const {
  mxUtils,
  mxCodec
} = mxgraph
export default {
  name: 'TableOutput',
  components: {
    'u-tran': ConformStanView,
    'schema-dialog': SchemaDialog,
    'table-dialog': TableDialog,
    TableTree,
    TableInfo
  },
  props: {
    name: String
  },
  watch: {
    tableOutput (tableOutput) {
      const val = tableOutput.specify_fields === 'Y'
      this.gFields = this.valueMapper = !val
    },
    'tableOutput.connection': function (val, oldVal) {
      if (val) {
        this.$set(this, 'connectionVisible', false)
      } else {
        this.$set(this, 'connectionVisible', true)
      }
    }
  },
  data () {
    return {
      tableInfoVisible: false,
      graph: null,
      tshow: false,
      srcPopover: false,
      schemaDialog: '浏览模式',
      tableDialog: '浏览数据库',
      sqlEditorTitle: '简单SQL编辑器',
      schemaDialogVisible: false,
      tableDialogVisible: false,
      sqlEditorVisible: false,
      districtList: [], // 展示的数据
      checkedData: [], // 已选择
      checkAll: false,
      tempTableOutput: null,
      searchWord: '',
      buttonAble: true,
      partitioning_field: true,
      partitioning_monthly: true,
      partitioning_daily: true,
      truncate: false,
      ignore_errors: false,
      tablename_field: true,
      tablename_in_table: true,
      return_keys_name: true,
      use_batch: false,
      table: false,
      gFields: true,
      valueMapper: true,
      dialogVisible: false,
      connectionVisible: true,
      dialogTitle: '输出映射',
      tableOutput: {
        name: '',  // 组件步骤名称
        connection: {
          id: '', // 数据源id
          name: '' // 数据源名称
        },
        schema: '', // 数据库模式名
        table: {
          id: '', // 表id
          name: '' // 表名称
        },
        tablename_field: '', // 包含表名的字段
        commit: 1000, // 每次提交数量
        partitioning_monthly: 'Y', // 每个月分区数据
        partitioning_daily: 'N', // 每天分区数据
        tablename_in_table: 'Y', // 是否存储表名字段
        use_batch: 'Y', // 使用批量插入
        truncate: 'N', // 执行前清空表
        ignore_errors: 'N', // 忽略输出
        specify_fields: 'N', // 是否指定数据库字段
        partitioning_enabled: 'N',
        tablename_in_field: 'N', // 表名定义在一个字段里（是/否）
        return_keys: 'N', // 返回一个自动产生的关键字
        return_keys_name: '', // 自动产生关键字 的字段名称
        fields: []  // 对应字段
      },
      count: 0,
      tabsValue: 'dbField',
      dbConnectionOptions: [],
      tableFields: [],
      streamFields: [],
      temp: {
        name: '',
        connection: {
          id: '',
          name: ''
        },
        schema: '',
        table: {
          id: '',
          name: ''
        },
        commit: 1000,
        partitioning_monthly: 'Y',
        partitioning_daily: 'N',
        tablename_in_table: 'Y',
        use_batch: 'Y',
        truncate: 'N',
        ignore_errors: 'N',
        specify_fields: 'N',
        partitioning_enabled: 'N',
        tablename_in_field: 'N',
        return_keys: 'N',
        fields: []
      },
      isDisabled_style: false,
      sqlValue: '',
      dataForm: {
        id: '',
        tableName: '',
        datasourceId: '',
        remark: '',
        tableCode: '',
        fieldList: []
      }
    }
  },
  computed: {
    domHeight: {
      get () { return this.$store.state.common.documentClientHeight - this.$BODY_MARGIN }
    }
  },
  methods: {
    loadData (data) {
      if (data) {
        this.$forceUpdate()
        this.tableOutput = JSON.parse(JSON.stringify(data))
        this.tempTableOutput = JSON.parse(JSON.stringify(data))
      }
    },
    // 预览
    preview () {
      if (this.tableOutput.table.id !== '') {
        this.tableInfoVisible = true
        this.$nextTick(() => {
          this.$refs.tableInfo.init(this.tableOutput.table.id)
        })
      } else {
        this.$message({
          message: '请选择数据表',
          type: 'warning'
        })
      }
    },
    // 保存表单数据
    handleSaveData () {
      if (this.tableOutput.name) {
        this.$emit('savePluginData', this.tableOutput)
      } else {
        this.$message({
          message: '步骤名称必填',
          type: 'warning'
        })
      }
    },
    partitioning_enabled_change (val) {
      val = val === 'Y'
      this.partitioning_field = this.partitioning_monthly = this.partitioning_daily = !val
      this.truncate = val
    },
    use_batch_change (val) {
      val = val === 'Y'
      this.ignore_errors = val
      this.isDisabled_style = val
    },
    return_keys_change (val) {
      val = val === 'Y'
      this.return_keys_name = !val
      this.use_batch = val
      this.tableOutput.use_batch = false
      this.ignore_errors = false
    },
    tablename_in_field_chanage (val) {
      val = val === 'Y'
      this.tablename_field = this.tablename_in_table = !val
      this.table = this.truncate = val
    },
    specify_fields_chanage (val) {
      val = val === 'Y'
      this.gFields = this.valueMapper = !val
    },

    createTableClick () {
      if (this.tableOutput.connection.id === '') {
        this.$message({
          message: '请选择数据源',
          type: 'warning'
        })
        return
      }
      if (this.tableOutput.table.name === '') {
        this.$message({
          message: '目标表为空',
          type: 'warning'
        })
        return
      }
      this.dataForm.fieldList = []
      const value = this.getXml()
      if (this.tableOutput.name) {
        API.trans.outPutFields(value, {'stepName': this.tableOutput.name}).then(res => {
          if (res.data) {
            this.stepsList = res.data
            if (this.stepsList.length > 0) {
              for (var i = 0; i < this.stepsList.length; i++) {
                var type = ''
                if (this.stepsList[i].type === 'String') {
                  type = this.$elementType.文本型
                } else if (this.stepsList[i].type === 'Integer') {
                  type = this.$elementType.整型
                } else if (this.stepsList[i].type === 'Number') {
                  type = this.$elementType.实数型
                } else if (this.stepsList[i].type === 'Date') {
                  type = this.$elementType.日期型
                } else {
                  type = this.$elementType.文本型
                }
                if (this.stepsList[i].length > 3000) {
                  type = this.$elementType.大文本型
                }
                if (type === this.$elementType.文本型) {
                  if (!this.stepsList[i].length || this.stepsList[i].length === '-') {
                    this.stepsList[i].length = 500
                  }
                }
                var field = {
                  fieldCode: this.stepsList[i].name === '-' ? '' : this.stepsList[i].name,
                  fieldName: this.stepsList[i].name,
                  fieldDecimal: this.stepsList[i].precision === '-' ? '' : this.stepsList[i].precision,
                  fieldType: type,
                  length: this.stepsList[i].length === '-' ? '' : this.stepsList[i].length,
                  isPk: 0,
                  nullable: 1
                }
                this.dataForm.fieldList.push(field)
              }
              this.dataForm.datasourceId = this.tableOutput.connection.id
              this.dataForm.tableName = this.tableOutput.table.name
              this.dataForm.tableCode = this.tableOutput.table.name
              this.$http({
                url: this.$http.adornUrl(`/model/physic/table/saveKettleTable`),
                method: 'post',
                data: this.$http.adornData(this.dataForm)
              }).then(({data}) => {
                if (data && data.code === 0) {
                  // this.parentId = data.table.datasourceId
                  this.tableOutput.table.name = data.table.tableName
                  this.tableOutput.name = data.table.tableName + '(' + this.tableOutput.connection.name + ')'
                  this.tableOutput.table.id = data.table.id
                  // API.srcAPI.getInfo(this.parentId).then(({data}) => {
                  //   if (data && data.code === 0) {
                  //     if (data.entity) { // && data.entity.dbSchema) {
                  //       this.tableOutput.schema = data.entity.dbSchema || ''
                  //     }
                  //   }
                  // })
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500
                  })
                } else {
                  this.$message.error(data.msg)
                }
              }).catch(error => {
                this.$message.error(error.response.data.message)
              })
            }
          } else {
            this.stepsList = []
          }
        })
      }
    },
    cancel () {
      if (this.tempTableOutput) {
        this.saveTempPluginData(this.tempTableOutput)
      } else {
        let tempdata = JSON.parse(JSON.stringify(this.temp))
        tempdata['name'] = this.tableOutput.name
        this.saveTempPluginData(tempdata)
      }
      this.$emit('cancel')
    },
    async getInputFieldsOption () {
      if (this.tableFields.length === 0) {
        const result = await this.getInputField()
        if (result.data) {
          let tableFields = []
          result.data.list.forEach(element => {
            tableFields.push(element.fieldCode)
          })
          this.tableFields = tableFields
        }
      }
    },
    async getStreamFiledOption () {
      if (this.streamFields.length === 0) {
        const streamFields = await this.getStreamField()
        if (streamFields) {
          this.$set(this, 'streamFields', streamFields.data)
        }
      }
    },
    async addObj () {
      this.tableOutput.fields.push({})
      this.$nextTick(() => {
        let container = this.$el.querySelector('.el-table__body-wrapper')
        container.scrollTop = container.scrollHeight
      })
      if (this.tableFields.length === 0) {
        const result = await this.getInputField()
        // if (result) {
          //   this.$set(this, 'tableFields', result.data);
        // }
        if (result.data) {
          let tableFields = []
          result.data.list.forEach(element => {
            tableFields.push(element.fieldCode)
          })
          this.tableFields = tableFields
        }
      }
      if (this.streamFields.length === 0) {
        const streamFields = await this.getStreamField()
        if (streamFields) {
          this.$set(this, 'streamFields', streamFields.data)
        }
      }
    },
    partition_change (value) {
      if (value === 'monthly') {
        this.tableOutput.partitioning_monthly = 'Y'
        this.tableOutput.partitioning_daily = 'N'
      } else if (value === 'daily') {
        this.tableOutput.partitioning_monthly = 'N'
        this.tableOutput.partitioning_daily = 'Y'
      }
    },
    removeObj (index) {
      this.tableOutput.fields.splice(index, 1)
      this.count = this.tableOutput.fields.length
    },
    // 重置表单数据
    resetFormData (stepname) {
      this.$forceUpdate()
      this.$refs['tableOutput'].resetFields()
      this.tableOutput = JSON.parse(JSON.stringify(this.temp))
      this.tableOutput['name'] = stepname
    },
    databases () {
      API.repository.databases().then(res => {
        this.dbConnectionOptions = res.data
      }).catch(error => {
        const errorResultData = error.response.data
        this.$message({
          message: errorResultData.error.message,
          type: 'warning'
        })
      })
    },
    async getFields () {
      if (this.tableOutput.connection === '') {
        this.$message({
          message: '请选择数据源',
          type: 'warning'
        })
        return
      }
      if (this.tableOutput.table === '') {
        this.$message({
          message: '请选择数据表',
          type: 'warning'
        })
        return
      }
      const self = this
      var tempStreamField = []
      if (this.streamFields.length === 0) {
        let streamFields = await this.getStreamField()
        tempStreamField = streamFields.data
        if (streamFields.data) {
          self.$set(self, 'streamFields', streamFields.data)
        }
      } else {
        tempStreamField = this.streamFields
      }
      if (this.tableFields.length === 0) {
        const result = await this.getInputField()
        // if (result.data) {
        //   self.$set(self, 'tableFields', result.data);
        // }
        if (result.data) {
          let tableFields = []
          result.data.list.forEach(element => {
            tableFields.push(element.fieldCode)
          })
          this.tableFields = tableFields
        }
      }
      var tempFileds = []
      tempStreamField.forEach(element => {
        let obj = {}
        obj.column_name = '' // element.name
        obj.stream_name = element.name
        tempFileds.push(obj)
      })
      self.$set(self.tableOutput, 'fields', tempFileds)
    },
    // 输出字段和流(输入)字段的匹配
    async fieldMatch () {
      for (var m = 0; m < this.streamFields.length; m++) {
        for (var n = 0; n < this.tableFields.length; n++) {
          var code = this.tableFields[n]
          if (code.toUpperCase() === this.streamFields[m].name.toUpperCase()) {
            // 给当前行的name赋值
            this.tableOutput.fields[m].column_name = code
          }
        }
      }
      this.$message({
        message: '匹配完成',
        type: 'success',
        duration: 1000
      })
    },
    setFields (data) {
      var fileds = []
      data.forEach(element => {
        let obj = {}
        obj.column_name = element.tableField
        obj.stream_name = element.streamField.name
        fileds.push(obj)
      })
      this.$set(this.tableOutput, 'fields', fileds)
    },
    hiddenDialog () {
      this.dialogVisible = false
    },
    setGraph (val) {
      this.graph = val
    },
    getSchemas () {
      this.schemaDialogVisible = true
      API.database.schemas({'database': this.tableOutput.connection}).then(res => {
        if (res.data) {
          this.$refs.schemaDialog.schemas = res.data
        }
      }).catch(error => {
        const errorResultData = error.response.data
        this.$message({
          message: errorResultData.error.message,
          type: 'warning'
        })
      })
    },
    setSchema (val, key) {
      this.$set(this.tableOutput, 'schema', val)
    },
    closeDialog () {
      this.schemaDialogVisible = false
      this.tableDialogVisible = false
    },
    getTables () {
      this.tableDialogVisible = true
      API.database.explorer({'database': this.tableOutput.connection}).then(res => {
        if (res) {
          this.$refs.tableDialog.data = res.data
        } else {
          this.$refs.tableDialog.data = []
        }
      }).catch(error => {
        const errorResultData = error.response.data
        this.$message({
          message: errorResultData.error.message,
          type: 'warning'
        })
      })
    },
    setTable (currentData) {
      this.$set(this.tableOutput, 'schema', currentData.schema || '')
      this.$set(this.tableOutput, 'table', currentData.name)
    },
    getInputField () {
      if (this.tableOutput.connection.id && this.tableOutput.table.id) {
        // const param = {};
        // param['database'] = this.tableOutput.connection;
        // param['schema'] = this.tableOutput.schema;
        // param['table'] = this.tableOutput.table;
        // return API.database.fields(param);
        return API.tableAPI.getTableFields(this.tableOutput.table.id)
      } else {
        this.$message({
          message: '请选择数据库表',
          type: 'warning'
        })
      }
    },
    async getStreamField () {
      const value = await this.getXml()
      if (this.tableOutput.name) {
        return API.trans.inputFields(value, {'stepName': this.tableOutput.name})
      }
    },
    getXml () {
      this.saveTempPluginData(this.tableOutput)
      const graph = this.graph
      const enc = new mxCodec(mxUtils.createXmlDocument())
      const node = enc.encode(graph.getModel())
      const value = mxUtils.getPrettyXml(node)
      return value
    },
    saveTempPluginData (formData) {
      this.$emit('saveTempPluginData', formData)
    },
    getSQL () {
      this.sqlEditorVisible = true
    },
    // 菜单树选中
    tableSelectHandler (data, node) {
      if (node.level !== 1 && data.type === '1') {
        let connection = {
          id: node.parent.data.id,
          name: node.parent.data.name
        }
        // this.parentId = data.parentId
        this.tableOutput.connection = connection
        this.tableOutput.table.name = data.name
        this.tableOutput.name = data.name + '(' + connection.name + ')'
        this.tableOutput.table.id = data.id
        API.srcAPI.getInfo(data.parentId).then(({data}) => {
          if (data && data.code === 0) {
            if (data.entity) { // && data.entity.dbSchema) {
              this.tableOutput.schema = data.entity.dbSchema || ''
            }
          }
          // 设置窗体数据
          this.$emit('savePluginData', this.tableOutput, true)
          this.tableFields = []
        })
        this.srcPopover = false
      }
    },
    /****
     * 数据源选中
     * @param data
     * @param node
     */
    srcSelectHandler (data, node) {
      let connection = {
        id: data.id,
        name: data.name
      }
      this.tableOutput.connection = connection
    },
    init () {
      this.visible = true
      this.$nextTick(() => {
      })
    },
    editDb () {
    },
    newDb () {}
  },
  mounted () {
    this.init()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px !important;
}
.el-tree {
  min-width: 400px;
  height: 211px;
  overflow-y: auto !important;
}
.el-main {
  padding: 5px;
}
.optionStyle button {
  margin: 0px
}
.el-textarea /deep/ .el-textarea__inner{
  height: 300px !important;
}
.button {
  width: 110px;
  height: 40px;
  display: inline-block;
  margin-left: 20px;
  text-align: center;
  font-size: 12px;
}
.el-checkbox__label {
  display: none !important
}
.el-dialog__header {
  text-align: left !important;
}
.el-dialog__footer {
  margin-top: 10px;
}
.el-tabs--border-card > .el-tabs__header{
  background-color: transparent;
}
</style>
